<template>
  <WsmTable
    ref="table"
    v-model="queryFormType"
    load-url="/dbms-server/base/sysconfig/page"
    :query-type="queryFormType"
    :change-load="true"
  >
    <template #title>{{ t('dbms.systemConfig.title') }}</template>
    <template #query="{ data }">
      <el-form-item :label="t('dbms.systemConfig.appName')">
        <el-select
          v-model="data.appName.value"
          default-first-option
          style="width: 220px"
          clearable
          :placeholder="t('dbms.systemConfig.appName')"
        >
          <el-option
            v-for="item in microsevices"
            :key="item.appName"
            :label="item.appNote"
            :value="item.appName"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="t('dbms.systemConfig.code')">
        <el-input v-model="data.code.value" :placeholder="t('dbms.systemConfig.code')" />
      </el-form-item>
      <el-form-item :label="t('dbms.systemConfig.configName')">
        <el-input
          v-model="data.configName.value"
          :placeholder="t('dbms.systemConfig.configName')"
        />
      </el-form-item>
    </template>
    <template #button="{ row }">
      <template v-if="row">
        <el-button v-hasPermi="'update'" @click="update(row)" type="primary">{{
          t('common.update')
        }}</el-button>
      </template>
    </template>
    <template #column>
      <el-table-column prop="appName" :label="t('dbms.systemConfig.appName')" width="180" />
      <el-table-column prop="code" :label="t('dbms.systemConfig.code')" width="180" />
      <el-table-column prop="configName" :label="t('dbms.systemConfig.configName')" width="180" />
      <el-table-column prop="configValue" :label="t('dbms.systemConfig.configValue')" width="180" />
      <el-table-column prop="note" :label="t('dbms.systemConfig.note')" />
    </template>
  </WsmTable>
  <WsmForm
    ref="updateForm"
    v-model="updateData"
    load-url="/dbms-server/base/sysconfig/get"
    label-width="100px"
    submit-url="/dbms-server/base/sysconfig/update"
    :title="t('dbms.systemConfig.updateTitle')"
    @success="flushed"
  >
    <template #default="{ form }">
      <el-form-item prop="configValue" :label="t('dbms.systemConfig.configValue')">
        <template v-if="inputType == 'input'">
          <el-input v-model="form.configValue" />
        </template>
        <template v-if="inputType == 'inputnumber'">
          <el-input-number type="number" v-model="form.configValue" />
        </template>
        <template v-else-if="inputType == 'select'">
          <el-select v-model="form.configValue">
            <el-option
              v-for="(item, index) in inputValue"
              :label="item.name"
              :value="item.value"
              :key="index"
            />
          </el-select>
        </template>
        <template v-else-if="inputType == 'radiobox'">
          <el-radio-group v-model="form.configValue">
            <el-radio v-for="(item, index) in inputValue" :value="item.value" :key="index">{{
              item.name
            }}</el-radio>
          </el-radio-group>
        </template>
        <template v-else-if="inputType == 'checkbox'">
          <el-checkbox
            v-for="(item, index) in inputValue"
            :key="index"
            :label="item.name"
            :value="item.value"
          >
            {{ item.name }}
          </el-checkbox>
        </template>
        <template v-else-if="inputType == 'date'">
          <el-date-picker v-model="form.configValue" type="date" />
        </template>
      </el-form-item>
    </template>
  </WsmForm>
</template>

<script setup lang="ts">
import { WsmTable } from '@/components/WsmTable'
import { WsmForm } from '@/components/WsmForm'
import { QueryFormType, QueryType } from '@/components/WsmTable/src/types'
import { ref } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { FormDataType } from '@/components/WsmForm/src/types'
import { listApi } from '@/api/dbms/microservices'

const { t } = useI18n()

//表格对象
const table = ref()

//修改表单对象
const updateForm = ref()
const updateData: FormDataType = {
  code: '',
  configValue: ''
}

//查询定义
const queryFormType: QueryFormType = {
  code: {
    value: '',
    queryType: QueryType.LIKE
  },
  appName: { value: '', queryType: QueryType.EQ },
  configName: {
    value: '',
    queryType: QueryType.LIKE
  }
}

const inputType = ref('input')
const inputValue = ref()
const update = (row: any) => {
  inputType.value = row.inputType
  if (row.inputType == 'select' || row.inputType == 'radiobox' || row.inputType == 'checkbox') {
    inputValue.value = JSON.parse(row.inputValue)
  } else {
    inputValue.value = row.inputValue
  }
  updateForm.value.show({ code: row.code })
}

const microsevices = ref()

const loadMicrosevices = async () => {
  const rs = await listApi()
  if (rs.success) {
    microsevices.value = rs.data
  }
}

loadMicrosevices()

const flushed = () => {
  table.value.load(1)
}
</script>

<style scoped></style>
